<!doctype html>
<html>
  <head>
    <style>
      div{
        width: 1000px; min-height: 100px; margin-top: 10px;
        border: 1px solid;
      }
    </style>
  </head>
  
  <body>
    <h2>To do</h2>
        
        <input type="checkbox" data-bind="checked: CheckAll" />
        <span data-bind="text: Counter"></span>
        <div data-bind="foreach: children">
            <input type="checkbox" data-bind="checked: checked" />
            <span>Name: </span><span data-bind="text: DisplayName"></span>
            <input data-bind="value: Name"></input>
            <input data-bind="value: Age"></input>
            <span>Render at: </span>
            <span data-bind="text: timeFormat"></span>
            <input type="button" data-bind="click: $root.DeletePerson"  value="Delete"/>
            <br />
        </div>
    
        <button data-bind="click: add1">Add 1 child</button>
        <button data-bind="click: add1000">1000 children</button>
        <button data-bind="click: add2000">2000 children</button>
        <button data-bind="click: add3000">3000 children</button>
    
  </body>
  <script src="knockout-3.0.0.js" type="text/javascript"></script>
  <script src="knockout-performance-test.js" type="text/javascript"></script>
</html>